<template>
  <div :style="{ padding:'20px' }">
    最低价
    <el-input-number v-model="temp.minBuff" />
    最高价
    <el-input-number v-model="temp.maxBuff" />
    最低在售
    <el-input-number v-model="temp.minNum" />
    名称
    <el-input v-model="temp.minName" style="width:100px" />
    <el-button
      style="margin-left: 20px"
      type="primary"
      @click="handleConfirm"
    >查询</el-button>
    <el-button type="danger" @click="changeClear">清空</el-button>
    <el-table
      ref="table"
      :data="filterDiscounts"
      border
      :style="{ marginTop: '20px' }"
    >
      <el-table-column type="index" align="center" width="60" label="序号" />
      <el-table-column prop="url" align="center" label="图片" width="200" class-name="image">
        <template slot-scope="scope">
          <img :src="scope.row.url" alt="图片" style="width:100px;height:100px">
        </template>
      </el-table-column>
      <el-table-column sortable label="名称" prop="name" align="center" width="220" />
      <el-table-column sortable label="枪支类型" prop="firearms" align="center" />
      <el-table-column sortable label="在售数量(个)" prop="num" align="center" />
      <el-table-column sortable label="buff价格(元)" prop="buff" align="center" />
      <el-table-column sortable label="steam价格(元)" prop="steam" align="center" />
      <el-table-column sortable label="折扣差价" prop="discount" align="center" />
      <el-table-column #default="{ row }" label="buff链接" align="center" prop="buffUrl" width="120">
        <el-link type="primary" :underline="false" @click="openUrl(row.buffUrl)"> buff </el-link>
      </el-table-column>
      <el-table-column #default="{ row }" label="steam链接" align="center" prop="steamUrl" width="120">
        <el-link type="primary" :underline="false" @click="openUrl(row.steamUrl)"> steam </el-link>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import buff from '../../../utils/json/buff.163.com.json'
export default {
  name: 'BuffGoods',
  data() {
    return {
      buff,
      temp: {
        minBuff: 0,
        maxBuff: 100,
        minNum: 0,
        minName: ''
      },
      restTemp: {
        minBuff: 0,
        maxBuff: 100,
        minNum: 0,
        minName: ''
      },
      discounts: [],
      filterDiscounts: []
    }
  },
  computed: {
    // filterDiscounts() {
    //   return this.discounts.filter(
    //     (item) => item.buff >= this.minBuff && item.buff <= this.maxBuff && item.num > this.minNum
    //   )
    // }
  },
  created() {
    this.getDiscount()
  },
  methods: {
    // 查询数据
    getDiscount() {
      let discounts = []
      const goods = this.buff.log.entries
        .filter((item) => item._resourceType === 'xhr')
        .filter((item) => item.request.url.startsWith('https://buff.163.com/api/market/goods'))
      goods.forEach((good) => {
        const items = JSON.parse(good.response.content.text).data.items
        console.log('items: ', items)
        const discount = items.map((item) => {
          return {
            name: item.name,
            num: item.sell_num,
            buff: item.sell_min_price,
            steam: item.goods_info.steam_price_cny,
            url: item.goods_info.icon_url,
            firearms: item.goods_info.info.tags.type.localized_name,
            discount: ((item.sell_min_price / item.goods_info.steam_price_cny) * 1.15).toFixed(2),
            buffUrl: `https://buff.163.com/goods/${item.id}`,
            steamUrl: item.steam_market_url
          }
        })
        discounts = discounts.concat(discount)
      })
      this.discounts = discounts
      this.filterDiscounts = discounts
    },
    // 按钮操作
    handleConfirm() {
      console.log(this.filterDiscounts)
      this.filterDiscounts = this.discounts.filter((item) => item.buff >= this.temp.minBuff && item.buff <= this.temp.maxBuff && item.num > this.temp.minNum && item.name === this.temp.minName)
    },
    changeClear() {
      this.temp = Object.assign({}, this.restTemp)
    },
    // 链接跳转
    openUrl(url) {
      window.open(url)
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-table__header{
  font-size: 14px
}
::v-deep .el-table__row{
  font-size: 15px
}
::v-deep .el-link{
  font-size: 15px
}
::v-deep .el-form .el-select, .el-input, .el-date-editor {
   width: 280px !important;
}
</style>
